<template>
    <el-upload :action="actionApi" list-type="picture-card" limit="1" :auto-upload="auto" :on-success="handleSuccess" :headers="{ authorization: token, 'Request-from': 'Dashboard' }" name="image" :show-file-list="false" v-bind="$attrs">
      <el-icon><Plus /></el-icon>
  
      <template #file="{ file }">
        <div>
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <el-icon><zoom-in /></el-icon>
            </span>
            <!-- <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
            >
              <el-icon><Download /></el-icon>
            </span> -->
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <el-icon><Delete /></el-icon>
            </span>
          </span>
        </div>
      </template>
    </el-upload>
  
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
  import { env, getAuthToken } from '@/support/helper'
  import { Code } from '@/enum/app'
  
  import type { UploadFile } from 'element-plus'

  const props = defineProps({
  action: {
    type: String,
    default: '/upload/image'
  },
  auto: {
    type: Boolean,
    default: true
  },
  modelValue: {
    type: String,
    default: '',
    require: true
  },
  imageClass: {
    type: String,
    default: ''
  }
})

  const emits = defineEmits(['update:modelValue'])
  const actionApi = ref<string>('')
  let baseURL = env('VITE_BASE_URL')
  const port = window.location.port;
  if(port == '8080'){
    baseURL = env('VITE_BASE_URL1')
  }else if(port == '8081'){
    baseURL = env('VITE_BASE_URL2')
  }else if(port == '8082'){
    baseURL = env('VITE_BASE_URL3')
  }else{
    baseURL = env('VITE_BASE_URL')
  }
  actionApi.value = baseURL + props.action

  const dialogImageUrl = ref('')
  const dialogVisible = ref(false)
  const disabled = ref(false)

  const token = ref<string>()
    token.value = 'Bearer ' + getAuthToken()

    const handleSuccess = (response: any) => {
    if (response.code === Code.SUCCESS) {
        emits('update:modelValue', response.data.path)
    } else {
        Message.error(response.message)
    }
    }
  
  const handleRemove = (file: UploadFile) => {
    console.log(file)
  }
  
  const handlePictureCardPreview = (file: UploadFile) => {
    dialogImageUrl.value = file.url!
    dialogVisible.value = true
  }
  
  const handleDownload = (file: UploadFile) => {
    console.log(file)
  }
  </script>